<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="control">
              <button>选项1</button>
              <button>选项2</button>
              <button>选项3</button>
        </div>
        <div class="content">
              <div class="box">内容1</div>
              <div class="box">内容2</div>
              <div class="box">内容3</div>
        </div>
  </div>


  <script>
    //   构造函数
       function Selectcard(btns,boxs){
        //    获取按钮
            this.btn = document.querySelectorAll(btns)
            // 获取卡片
            this.box = document.querySelectorAll(boxs)
            // 添加索引属性
            this.index = 0
            // 调用绑定事件
            this.bindEvent()
            this.change()
        }

        
    //    事件绑定功能
        Selectcard.prototype.bindEvent = function(){
            // 记录指向实例对象的this指针
            var self = this
            // 循环添加点击事件
            for(var i = 0;i<self.btn.length;i++){
                // 给实例对象按钮索引记录为i
                console.log(i);
                // 一句话显示第一个卡片
                // i === 0? self.box[i].style.display = 'block':self.box[i].style.display = 'none'
                self.btn[i].index = i
                // 给实例对象里按钮添加点击事件
                self.btn[i].onclick = function(){
                    // 把点击的dom btn元素的索引值赋值给实例对象的的索引
                   self.index = this.index
                //    调用卡片切换功能
                   self.change()
                }
            }
         }
        //  切换卡片功能
        Selectcard.prototype.change = function(){
            // 记录指向实例对象的this指针
            var self = this
            // 循环隐藏所有卡片
            for(var i = 0;i<self.box.length;i++){
                self.box[i].style.display = 'none'
            }
            // 显示点击卡片
            self.box[self.index].style.display = 'block'
        }
        // 调用构造函数
        var res = new Selectcard('.control button','.content .box')
        // 打印
        console.log(res);
  </script>
</body>
</html>